<template>
  <div class="aa_seePlate">
    <div class="aa_seePlate_head">
      <div class="aa_seePlate_head_left">系统数据显示区</div>
      <div class="aa_seePlate_head_right">生产问题展示区</div>
    </div>
    <div class="aa_seePlate_main" ref="controlContent">
      <div class="aa_seePlate_main_left">
        <div class="content" ref="content">
          <div class="title">订单进度统计表</div>
          <vTable getDataApi="getSalesInfo" :tableColumn="tableColumn.getSalesInfo" :tableHeight="tableHeight" />
        </div>
        <div class="content">
          <div class="title">任务状态显示</div>
          <vTable getDataApi="getTaskStatus" :tableColumn="tableColumn.getTaskStatus" :tableHeight="tableHeight" />
        </div>
        <div class="content">
          <echarts v-if="!loading" :option="option" />
        </div>
        <div class="content">
          <div class="title">详细列表</div>
          <vTable
            v-if="countData"
            :tableDataParent="countData"
            :tableColumn="tableColumn.getProductCount"
            :tableHeight="tableHeight"
          />
        </div>
      </div>
      <div class="aa_seePlate_main_right">
        <div class="content contentImg">
          <img class="img" @click="dialogTableVisible = true" src="http://49.233.204.154/img/organization.png" alt="" />
        </div>
        <div class="content">
          <div class="title">质量问题汇总 <el-button type="primary" @click="add('qa')" plain>添加</el-button></div>
          <vTable getDataApi="getQaList" ref="qa" :tableColumn="tableColumn.getQaList" :tableHeight="tableHeight" />
        </div>
        <div class="content">
          <div class="title">
            生产技术问题汇总 <el-button type="primary" @click="add('issue')" plain>添加</el-button>
          </div>
          <vTable
            getDataApi="getIssueList"
            ref="issue"
            :tableColumn="tableColumn.getIssueList"
            :tableHeight="tableHeight"
          />
        </div>
        <div class="content">
          <div class="title">
            生产工作进度 <el-button type="primary" @click="add('progress')" plain>添加</el-button>
          </div>
          <vTable
            getDataApi="getProgressList"
            ref="progress"
            :tableColumn="tableColumn.getProgressList"
            :tableHeight="tableHeight"
          />
        </div>
      </div>
    </div>
    <el-dialog title="" :visible.sync="dialogTableVisible" fullscreen>
      <img src="http://49.233.204.154/img/organization.png" alt="" />
    </el-dialog>
    <FormDialog ref="FormDialog" :formType="formType" @submit="getTableData"></FormDialog>
  </div>
</template>

<script>
import vTable from './table';
import { getBarOptions } from './data';
import echarts from './echarts';
import FormDialog from './FormDialog';

export default {
  components: {
    vTable,
    echarts,
    FormDialog,
  },
  data() {
    return {
      loading: true,
      dialogTableVisible: false,
      formType: 'qa',
      option: {},
      countData: '',
      tableHeight: 0,
      tableColumn: {
        getSalesInfo: [
          {
            label: '订单号',
            prop: 'num',
          },
          {
            label: '客户代码',
            prop: 'factory_no',
          },
          {
            label: '产品型号',
            prop: 'product_num',
          },
          {
            label: '订单数量',
            prop: 'count',
          },
          {
            label: '在制品数量',
            prop: 'work_count',
          },
          {
            label: '已完工数量',
            prop: 'finish_count',
          },
          {
            label: '备注',
            prop: 'desc',
          },
        ],
        getTaskStatus: [
          {
            label: '产品名称',
            prop: 'product_num',
          },
          {
            label: '规格型号',
            prop: 'product_name',
          },
          {
            label: '下达日期',
            prop: 'time',
          },
          {
            label: '任务状态',
            prop: 'status',
            filter: {
              0: '未开始',
              1: '完成',
              2: '已开始',
            },
          },
          {
            label: '装配员',
            prop: 'user_name',
          },
          {
            label: '工位编号',
            prop: 'product_num',
          },
          {
            label: '生产进度',
            prop: 'progress',
          },
          {
            label: '备注',
            prop: 'desc',
          },
        ],
        getQaList: [
          {
            label: '质量问题内容',
            prop: 'content',
          },
          {
            label: '所属产品',
            prop: 'product_num',
          },
          {
            label: '责任人',
            prop: 'user_name',
          },
          {
            label: '日期',
            prop: 'date',
          },
          {
            label: '解决办法',
            prop: 'solution',
          },
          {
            label: '是否完结',
            prop: 'end_status',
            filter: {
              0: '否',
              1: '是',
            },
          },
          {
            label: '实际完成时间',
            prop: 'actual_date',
          },
          {
            label: '进度',
            prop: 'progress',
          },
          {
            label: '备注',
            prop: 'desc',
          },
        ],
        getProgressList: [
          {
            label: '工作内容',
            prop: 'content',
          },
          {
            label: '责任人',
            prop: 'user_name',
          },
          {
            label: '开始时间',
            prop: 'start_date',
          },
          {
            label: '要求完成时间',
            prop: 'end_date',
          },
          {
            label: '工作进度',
            prop: 'progress',
          },
          {
            label: '完成时间',
            prop: 'actual_end_date',
          },
        ],
        getIssueList: [
          {
            label: '问题内容',
            prop: 'content',
          },
          {
            label: '所属产品',
            prop: 'product_num',
          },
          {
            label: '技术负责人',
            prop: 'user_name',
          },
          {
            label: '发现时间',
            prop: 'issue_date',
          },
          {
            label: '进度',
            prop: 'progress',
          },
          {
            label: '是否按时完成',
            prop: 'end_status',
            filter: {
              0: '否',
              1: '是',
            },
          },
          {
            label: '计划完成时间',
            prop: 'project_finish_date',
          },
          {
            label: '实际完成时间',
            prop: 'actual_finish_date',
          },
          {
            label: '备注',
            prop: 'desc',
          },
        ],
        getProductCount: [
          {
            label: '规格型号',
            prop: 'product_num',
          },
          {
            label: '产品名称',
            prop: 'product_name',
          },
          {
            label: '生产总数量',
            prop: 'total_count',
          },
          {
            label: '库存数量',
            prop: 'finish_count',
          },
        ],
      },
    };
  },
  mounted() {
    this.getTableHeight();
  },
  created() {
    this.getEcharts();
  },
  methods: {
    getTableHeight() {
      this.tableHeight = this.$refs.content.offsetHeight - 40;
    },
    getEcharts() {
      this.loading = true;
      this.$api.aa_seePlate.getProductCount().then(res => {
        this.option = getBarOptions(res.data);
        this.countData = res.data;
        this.loading = false;
      });
    },
    getTableData(val) {
      this.$refs[val].init();
    },
    add(val) {
      this.formType = val;
      setTimeout(() => {
        this.$refs.FormDialog.show('add');
      }, 10);
    },
  },
};
</script>

<style lang="scss" scpoed>
.aa_seePlate {
  height: 100%;
  width: 100%;
  .aa_seePlate_head {
    height: 30px;
    line-height: 30px;
    display: flex;
    text-align: center;
    border-bottom: 1px solid rgb(199, 199, 199);
    font-size: 20px;
    & > div {
      flex: 1;
    }
  }
  .aa_seePlate_main {
    height: calc(100% - 30px);
    display: flex;
    width: 100%;
    overflow: auto;
    & > div {
      flex: 1;
    }
  }

  .content {
    height: 50%;
    width: calc(100% - 20px);
    padding: 10px;
    .title {
      height: 34px;
      line-height: 34px;
      font-weight: bolder;
    }
  }
  .contentImg {
    display: flex;
    justify-content: center;
    img {
      height: 100%;
    }
  }
}
</style>
